<template>
  <div class="checkMaintainDetail">
    <template v-if="sucessStatus">
      <Card :title="`${$t('maintenance.MaintenanceObj')}`" class="detail-content-layout">
        <div class="basic-info">
          <div class="basic-info-body">
            <div class="titleItem">
              <div class="checkObject">
                <div class="checkObjectItem">
                  <div class="checkObjectName">{{ $t('maintenance.plan') }}</div>
                  <div class="checkObjectValue">
                    <Tooltip max-width="200">
                      <div class="over-wrapper">{{ detail.planName }}</div>
                      <div slot="content">
                        <p>{{ detail.planName }}</p>
                      </div>
                    </Tooltip>
                  </div>
                </div>
                <div class="checkObjectItem">
                  <div class="checkObjectName">{{ $t('设备等级') }}</div>
                  <div class="checkObjectValue">{{ detail.deviceGrade }}</div>
                </div>
                <div class="checkObjectItem">
                  <div class="checkObjectName">{{ $t('设备类别') }}</div>
                  <div class="checkObjectValue">{{ detail.categoryName }}</div>
                </div>
                <div class="checkObjectItem">
                  <div class="checkObjectName">{{ $t('maintenance.EquipmentName') }}</div>
                  <div class="checkObjectValue">{{ detail.deviceName }}</div>
                </div>
                <div class="checkObjectItem">
                  <div class="checkObjectName">{{ $t('maintenance.EquipmentNo') }}</div>
                  <div class="checkObjectValue">{{ detail.deviceNo }}</div>
                </div>
                <div class="checkObjectItem">
                  <div class="checkObjectName">{{ $t('equipCheck.SerialNo') }}</div>
                  <div class="checkObjectValue">{{ detail.deviceMId }}</div>
                </div>
                <div class="checkObjectItem">
                  <div class="checkObjectName">{{ $t('ledger.EquipmentType') }}</div>
                  <div class="checkObjectValue">{{ detail.specification }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Card>
      <Card :title="`${$t('maintenance.MaintenanceTime')}`" class="detail-content-layout mt16">
        <div class="basic-info">
          <div class="basic-info-body">
            <div class="titleItem">
              <!--            <span>{{$t('maintenance.MaintenanceProcess')}}</span>-->
              <div class="checkObject">
                <div class="checkObjectItem">
                  <div class="checkObjectName">{{ $t('maintenance.Taskgenerationtime') }}</div>
                  <div class="checkObjectValue">{{ detail.createTime }}</div>
                </div>
                <div class="checkObjectItem">
                  <div class="checkObjectName">{{ $t('maintenance.TaskAllocationTime') }}</div>
                  <div class="checkObjectValue">{{ detail.distriTime }}</div>
                </div>
                <div class="checkObjectItem">
                  <div class="checkObjectName">{{ $t('maintenance.MaintenanceStartTime') }}</div>
                  <div class="checkObjectValue">{{ detail.taskBeginTime }}</div>
                </div>
                <div class="checkObjectItem">
                  <div class="checkObjectName">{{ $t('maintenance.MaintenanceEndTime') }}</div>
                  <div class="checkObjectValue">{{ detail.operateTime }}</div>
                </div>
                <div class="checkObjectItem">
                  <div class="checkObjectName">{{ $t('maintenance.MaintenanceBy') }}</div>
                  <div class="checkObjectValue">{{ detail.operateEmpno }} - {{ detail.operateName }}</div>
                </div>
                <div class="checkObjectItem">
                  <div class="checkObjectName">{{ $t('maintenance.Supportedby') }}</div>
                  <div class="checkObjectValue">
                    <template v-if="showStatus">
                      <!-- <Input clearable type="text" v-model="detail.assistMaintainBy" /> -->
                      <Select multiple style="width:100%"  v-model="detail.assistMaintainBy">
                        <Option v-for="(item,index) in userList" :label="item.realname" :value="item.realname" :key="index">
                        </Option>
                      </Select>
                      <!-- /basic/user/searchUser -->
                    </template>
                    <template v-else>
                      {{ detail.assistMaintainBy }}
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Card>

      <Card :title="`${$t('maintenance.Maintenancecontent')}`" class="detail-content-layout mt16">
        <div class="basic-info">
          <div class="basic-info-body">
            <div class="contentTable">
              <Table @on-column-width-resize="(a, b, c, d) => { onColumnWidthResize(a, b, c, d, 'maintenanceDetail0012') }"
                class="resizable-table" border ref="selection" :columns="contentColumns"
                :data="detail.dcmMaintainProject">
                <!--               <template slot="header">-->
                <!--                 <sapn>尼玛</sapn>-->
                <!--               </template>-->
                <template slot-scope="{ row }" slot="action">
                  <span class="operationBtn" @click="checkInfo(row, 1)">{{ $t('maintenance.Tool') }}</span>
                  <span class="operationBtn" @click="checkInfo(row, 2)">{{ $t('maintenance.Material') }}</span>
                  <span class="operationBtn" @click="checkInfo(row, 3)">{{ $t('maintenance.Appendix') }}</span>
                </template>
                <template slot-scope="{row}" slot="resultStatus">
                  <template v-if="showStatus && Number(datingObj.taskStatus)==2">
                    <RadioGroup v-model="row.resultStatus" @on-change="resultStatusChange(row)">
                      <Radio :label="1">正常</Radio>
                      <Radio :label="2">异常</Radio>
                    </RadioGroup>
                  </template>
                  <template v-else>{{ row.resultStatus ? (row.resultStatus === 1 ? '正常' : '异常') : '' }}</template>
                </template>
                <template slot-scope="{row}" slot="resultrecord">
                  <template v-if="showStatus && Number(datingObj.taskStatus)==2">
                    <Input v-model="row.resultValue" clearable type="text" @on-change="resultValueChange(row)" />
                  </template>
                  <template v-else>{{ row.resultValue }}</template>
                </template>
              </Table>
            </div>
          </div>
        </div>
      </Card>

      <Card :title="`${$t('preliminary.confirmInformation')}`"
        v-if="Number(this.datingObj.taskStatus) >= 4 && Number(this.datingObj.taskStatus) < 5 && detail.isConfirm"
        class="detail-content-layout mt16">
        <div class="basic-info">
          <div class="basic-info-body">
            <div class="titleItem">
              <!--            <span>{{$t('preliminary.confirmInformation')}}</span>-->
              <div class="checkObject">
                <div class="checkObjectItem">
                  <div class="checkObjectName">{{ $t('maintenance.ConfirmedTime') }}</div>
                  <div class="checkObjectValue">{{ detail.reviewTime }}</div>
                </div>
                <div class="checkObjectItem">
                  <div class="checkObjectName">{{ $t('maintenance.ConfirmedBy') }}</div>
                  <div class="checkObjectValue">{{ detail.reviewName }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Card>
      <Card v-if="Number(this.datingObj.taskStatus) < 5 && Number(this.datingObj.taskStatus) >= 3 && detail.isConfirm"
        :title="`${$t('maintenance.MaintenanceScoring')}`" class="detail-content-layout mt16">
        <div class="basic-info">
          <div class="basic-info-body">
            <div class="titleItem">
              <div class="scoreBox">
                <div class="item_score">
                  <span class="text">{{ $t('服务态度评分') }}: </span>
                  <Rate :disabled="!beconfirmed" v-model="serviceAttitudeScore" clearable />
                </div>
                <div class="item_score">
                  <span class="text">{{ $t('技术能力评分') }}: </span>
                  <Rate :disabled="!beconfirmed" v-model="technicalSkillsScore" clearable />
                </div>
                <div class="item_score">
                  <span class="text">{{ $t('响应速度评分') }}: </span>
                  <Rate :disabled="!beconfirmed" v-model="responseSpeedScore" clearable />
                </div>
              </div>
            </div>
          </div>
        </div>
      </Card>
    </template>
    <template v-else>
      <div class="erroBox">
        <div class="erroBox_list">
          <span class="imgBox">
            <img src="@/assets/imgs/maintenance/shibai.png" alt="异常图" />
          </span>
          <span class="text">{{ $t('maintenance.abnormal') }}</span>
          <span class="textOne">{{ projectStr }}</span>
          <span class="textTwo">{{ $t('结果存在异常,是否生成维修单') }}: </span>
          <span class="btn" @click="weixiuClick">
            {{ $t('maintenance.maintenanceOrder') }}
          </span>
          <span class="btn" @click="weixiucancle">{{ $t('maintenance.Cancle') }}</span>
        </div>
      </div>
    </template>


    <Modal :mask-closable="false" v-model="visible" :title="`${$t('common.Detail')}`" class="checkContentModal"
      width='1200' footer-hide>
      <contentDetail :planMaterialList="materialList" :planToolList="toolList"></contentDetail>
    </Modal>
    
    <Modal :mask-closable="false" v-model="useTableStatus" :title="`${$t('maintenance.usetools')}`"
      class="checkContentModal" width='900' footer-hide>
      <div class="materBox">
        <div class="icon" @click="handleTool" v-if="showStatus">
          <Icon type="md-add" color="#187BDB" />{{ $t('maintenance.AddTools') }}
        </div>
        <Table @on-column-width-resize="(a, b, c, d) => { onColumnWidthResize(a, b, c, d, 'UsetoolsA001') }" class="resizable-table"
          border :columns="useTableColumn" :data="useTablelist">
          <template slot-scope="{row}" slot="action">
            <span class="operationBtn" @click="toolEdit(row)">{{ $t('common.Edit') }}</span>
            <span class="operationBtn" @click="toolDelete(row)">{{ $t('common.Delete') }}</span>
          </template>
        </Table>
      </div>
    </Modal>

    <Modal :mask-closable="false" v-model="fileTableStatus" :title="`${$t('ledger.attachmentinformation')}`"
      class="checkContentModal" width='900' footer-hide>
      <div class="imgBoxlist">
        <template v-if="showStatus">
          <div class="videoList">
            <Row>
              <Col :span="4" v-for="(file, index) in tarGetObj.attachments" :key="index">
              <template>
                <div class="itemCol">
                  <van-badge>
                    <template>
                      <span class="item" @click="previewClicjk(file, index, tarGetObj.attachments)">
                        <template v-if="!file.filepath.includes('video')">
                          <img :src="util.filePathToUrl(file.filepath)" alt="" />
                        </template>
                        <template v-else>
                          <video preload="auto" loop autoplay muted>
                            <source :src="util.filePathToUrl(file.filepath)" type="video/mp4">
                          </video>
                        </template>
                      </span>
                    </template>
                    <template #content>
                      <van-icon @click="delFujian(file, tarGetObj)" name="cross" class="badge-icon" />
                    </template>
                  </van-badge>
                </div>
              </template>
              </Col>
              <Col :span="4">
              <div class="itemCol videoCol">
                <van-uploader accept="*" :show-upload-list="false" :after-read="afterRead">
                  <template #preview-cover="{ file }">
                    <span class="text">{{ $t('maintenance.New') }}</span>
                  </template>
                </van-uploader>
              </div>
              </Col>
            </Row>
          </div>
        </template>
        <template v-else>
          <template v-if="tarGetObj.attachments && tarGetObj.attachments.length">
            <div class="videoList">
              <Row>
                <Col :span="4" v-for="(list, index) in tarGetObj.attachments" :key="index">
                <div class="itemCol">
                  <span class="item" @click="previewClicjk(list, index, tarGetObj.attachments, 'target')">
                    <template v-if="!list.filePath.includes('video')">
                      <img :src="util.filePathToUrl(list.filePath)" alt="" />
                    </template>
                    <template v-else>
                      <video preload="auto" loop autoplay muted>
                        <source :src="util.filePathToUrl(list.filePath)" type="video/mp4">
                      </video>
                    </template>
                  </span>
                </div>
                </Col>
              </Row>
            </div>
          </template>
        </template>
      </div>
    </Modal>

    <Modal :mask-closable="false" v-model="sopStatus" :title="`${$t('保养SOP')}`" class="checkContentModal" width='900'
      footer-hide>
      <div class="imgBoxlist">
        <div class="videoList">
          <Row>
            <Col :span="4" v-for="(list, index) in sopRow.attachment" :key="index">
            <div class="itemCol">
              <span class="item" @click="previewClicjk(list, index, sopRow.attachment)">
                <template v-if="util.fileType(list.filePath) === 'image'">
                  <img :src="util.filePathToUrl(list.filePath)" alt="" />
                </template>
                <template v-else-if="util.fileType(list.filePath) === 'video'">
                  <video preload="auto" loop autoplay muted>
                    <source :src="util.filePathToUrl(list.filePath)" type="video/mp4">
                  </video>
                </template>
                <template v-else>
                  <span class="fileSty">
                    <span>{{ list.fileName }}</span>
                  </span>
                </template>
              </span>
            </div>
            </Col>
          </Row>
        </div>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="materTableStatus" :title="`${$t('maintenance.Usematerial')}`"
      class="checkContentModal" width='900' footer-hide>
      <div class="materBox">
        <div class="icon" @click="handleMaterial" v-if="showStatus">
          <Icon type="md-add" color="#187BDB" />{{ $t('maintenance.Addmaterial') }}
        </div>
        <Table @on-column-width-resize="(a, b, c, d) => { onColumnWidthResize(a, b, c, d, 'MaterialA001') }" class="resizable-table"
          border :columns="contentColumnsInfo" :data="materTablelist">
          <template slot-scope="{row}" slot="action">
            <span class="operationBtn" @click="materEdit(row)">{{ $t('common.Edit') }}</span>
            <span class="operationBtn" @click="materDelete(row)">{{ $t('common.Delete') }}</span>
          </template>
        </Table>
      </div>
    </Modal>
    <!-- 添加物料 -->
    <Modal :mask-closable="false" v-model="materialVisible" width="640" @on-visible-change="visibleChange"
      class="addModal modal-content-layout" title="物料信息">
      <div class="addProject">
        <Form label-position="top">
          <FormItem :label="$t('common.GoodsName')" required>
            <template v-if="materiaStatus == 'add'">
              <Select filterable clearable v-model="tableMaterial.materialName" :remote-method="materielNoChange"
                @on-change="materieChange">
                <Option v-for="item in materielNoList" :value="item.materialName"
                  :label="item.materialName" :key="item.materialName" />
              </Select>
            </template>
            <template v-else>
              <Input disabled v-model="tableMaterial.materialName" />
            </template>
          </FormItem>
          <FormItem :label="$t('maintenance.MaterialnoInfo')" required>
            <Input class="inputWrapper" disabled v-model="tableMaterial.materialCode" />
          </FormItem>
          <FormItem :label="$t('common.Specification')">
            <Input class="inputWrapper" disabled v-model="tableMaterial.specification" />
          </FormItem>
          <FormItem :label="$t('spareParts.quantity')" required>
            <InputNumber :min="1" :disabled="tableMaterial.numStatus" v-model="tableMaterial.num" />
          </FormItem>
        </Form>
      </div>

      <div slot="footer">
        <Button type="default" @click="materiaClose">{{ $t('common.Cancle') }}</Button>
        <Button type="primary" @click="materiaTableobj">{{ $t('maintenance.Confirmed') }}</Button>
      </div>
    </Modal>
    <!--   添加工具-->
    <Modal :mask-closable="false" v-model="toollVisible" width="640" @on-visible-change="toolvisibleChange"
      class="addModal modal-content-layout" :title="`${$t('maintenance.usetools')}`">
      <div class="addProject">
        <Form label-position="top">
          <FormItem :label="$t('maintenance.ToolName')" required>
            <template v-if="toolStatus == 'add'">
              <Select filterable clearable v-model="tableTool.toolName" :remote-method="toolNoChange"
                @on-change="toolChange">
                <Option v-for="item in toolNoList" :value="item.materialName" :label="item.materialName"
                  :key="item.id" />
              </Select>
            </template>
            <template v-else>
              <Input disabled v-model="tableTool.toolName" />
            </template>
          </FormItem>
          <FormItem :label="$t('maintenance.Materialno')" required>
            <Input class="inputWrapper" disabled v-model="tableTool.toolCode" />
          </FormItem>
          <FormItem :label="$t('保管方式')">
            <Input class="inputWrapper" v-model="tableTool.toolMode" />
          </FormItem>
          <FormItem :label="$t('maintenance.Amount')" required>
            <InputNumber :min="1" :disabled="tableTool.numStatus" v-model="tableTool.toolNum" />
          </FormItem>
        </Form>
      </div>

      <div slot="footer">
        <Button type="default" @click="toolClose">{{ $t('common.Cancle') }}</Button>
        <Button type="primary" @click="toolTableobj">{{ $t('maintenance.Confirmed') }}</Button>
      </div>
    </Modal>

    <repair ref="addModal" @cancleBack="cancleBack" />

    <gallery :images="galleryImages" :index="galleryIndex" @close="galleryIndex = null"></gallery>
    <div class="box_footer mt16">
      <span class="btn" @click="cancleRetu">{{ $t('maintenance.Backlevel') }}</span>
      <template>
        <span v-if="showStatus || (beconfirmed && confirmedBy)" class="btn" @click="endBao"
          >{{ baoStr }}</span>
      </template>
      <!--      <span class="btn" v-if="Number(this.datingObj.taskStatus) === 5" @click="closeMance">{{$t('maintenance.Close')}}</span>-->
    </div>
    <iframeModalCompent v-if="iframeShow" :isStudy="false" :iframeShow="iframeShow" :iframeModalSrc="iframeModalSrc"
      @closeIframe="iframeShow = false"></iframeModalCompent>
  </div>
</template>

<script>
import repair from "@/views/fault/workOrderHall/modules/addModal.vue";
import contentDetail from '../maintain/contentDetail'
import VueGallery from 'vue-gallery'
import fileDownload from 'js-file-download'
import { getListitems, saveTool, finishCase, fileUpload, delfileUpload, deleMaterielNo,addfileUpload, enterMaintenance, deleToolNo } from '@/api/maintenance'
import { mapGetters } from "vuex";
import toggleTableOperation from "@/mixins/toggleTableOperation";
import iframeModalCompent from "@/views/knowledgeBase/modal/iframe.vue";
export default {
  name: "checkMaintainDetail",
  mixins: [toggleTableOperation],
  components: {
    contentDetail,
    'gallery': VueGallery,
    repair,
    iframeModalCompent
  },
  data() {
    return {
      iframeShow: false, // 预览弹窗
      iframeModalSrc: "",
      sopRow: {},
      sopStatus: false,
      tarGetid: '',
      repairShow: false,
      fileListArr: [],
      tableTool: {},
      tableMaterial: {},
      toollVisible: false,
      materialVisible: false,
      beconfirmed: false,
      materiaStatus: "add",
      toolStatus: "add",
      serviceAttitudeScore: "",
      technicalSkillsScore: "",
      responseSpeedScore: "",
      tarGetObj: {},
      detail: {},
      galleryIndex: null,
      galleryImages: [],
      showStatus: false,
      total: 64,
      pageSize: 10,
      pageNum: 1,
      visible: false,
      pageSizeOption: [10, 20, 30, 40],
      userList:[],
      useTableColumn: [
        {
          type: 'index',
          width: 90,
          title: `${this.$t('common.index')}`,
          align: 'center'
        },
        {
          title: `${this.$t('maintenance.ToolMaterialNo')}`,
          key: 'toolCode',
          align: 'center',
          resizable: true
        },
        {
          title: `${this.$t('maintenance.Toolnames')}`,
          key: 'toolName',
          align: 'center',
          resizable: true
        },
        {
          title: `${this.$t('spareParts.quantity')}`,
          key: 'toolNum',
          align: 'center',
          resizable: true
        },
        {
          title: `${this.$t('保管方式')}`,
          key: 'toolMode',
          align: 'center',
          resizable: true
        },
        {
          title: `${this.$t('common.operation')}`,
          key: 'action',
          align: 'center',
          slot: 'action'
        }
      ],
      contentColumnsInfo: [
        {
          type: 'index',
          width: 90,
          title: `${this.$t('common.index')}`,
          align: 'center'
        },
        {
          title: `${this.$t('maintenance.MaterialnoInfo')}`,
          key: 'materialCode',
          align: 'center',
          width: 170,
          resizable: true
        },
        {
          title: `${this.$t('common.GoodsName')}`,
          key: 'materialName',
          align: 'center',
          width: 170,
          resizable: true
        },
        {
          title: `${this.$t('spareParts.Specification')}`,
          key: 'specification',
          align: 'center',
          width: 170,
          resizable: true
        },
        {
          title: `${this.$t('spareParts.quantity')}`,
          key: 'num',
          width: 170,
          align: 'center',
          resizable: true
        },
        {
          title: `${this.$t('common.operation')}`,
          key: 'action',
          align: 'center',
          slot: 'action'
        }
      ],
      contentColumns: [
        { title: `${this.$t('maintenance.MaintenanceItem')}`, key: 'itemProject', align: 'center', width: 180, tooltip: true, resizable: true },
        { title: `${this.$t('maintenance.MaintenanceMethod')}`, key: 'itemMethod', align: 'center', width: 200, tooltip: true, resizable: true },
        { title: `${this.$t('保养标准')}`, key: 'unitName', align: 'center', width: 200, tooltip: true, resizable: true },
        { title: `${this.$t('maintenance.numberRequirements')}`, key: 'minValue', align: 'center', width: 160, tooltip: true, resizable: true },
        { title: `${this.$t('maintenance.workinghours')}`, key: 'itemHours', align: 'center', width: 180, tooltip: true, resizable: true },
        {
          title: `${this.$t('保养位置')}`,
          key: 'bomOrg',
          align: 'center', width: 150,
          tooltip: true,
          resizable: true
        },
        {
          title: `${this.$t('maintenance.maintainresults')}`,
          key: 'resultStatus',
          align: 'center', width: 150,
          slot: 'resultStatus',
          tooltip: true,
          resizable: true,
          renderHeader: (h) => {
            return h('div', (this.showStatus && this.datingObj.taskStatus==2) ? [
              h('Checkbox', {
                style: {
                  display: "inline-block",
                  margin: '0 5px 0 0 !important'
                },
                on: {
                  'on-change': (val) => {
                    this.changeradio(val)
                  }
                }
              }),
              h('span', {
                domProps: {
                  innerHTML: `${this.$t('maintenance.maintainresults')}`
                }
              })
            ] : [h('span', `${this.$t('maintenance.maintainresults')}`)])
          }
        },
        {
          title: `${this.$t('maintenance.resultrecord')}`,
          key: 'resultValue',
          slot: 'resultrecord',
          align: 'center',
          width: 200, tooltip: true,
          resizable: true
        },
        {
          title: `${this.$t('保养SOP')}`,
          key: 'resultValue',
          align: 'center',
          minWidth: 200,
          resizable: true, tooltip: true,
          render: (h, params) => {
            if (params.row.attachment && params.row.attachment.length) {
              return h('div', [
                h('span', {
                  style: {
                    color: '#187BDB',
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      this.sopStatus = true
                      this.sopRow = params.row
                    }
                  }
                }, '查看')
              ]);
            } else {
              return h('div', [
                h('span', '无')
              ])
            }
          }
        },
        {
          title: `${this.$t('common.operation')}`, slot: 'action', width: 220, align: 'center', fixed: "right"
        },
      ],
      hearRadio: false,
      confirmedBy: false,
      projectStr: '',
      data: [],
      materialList: [],
      useTablelist: [],
      useTableStatus: false,
      toolNoList: [],
      materielNoList: [],
      fileTablelist: [],
      fileTableStatus: false,
      sucessStatus: true,
      materTablelist: [],
      materTableStatus: false,
      toolList: []
    }
  },
  computed: {
    ...mapGetters([
      'datingObj'
    ])
  },
  created() {
    this.getColumnWidth(this.contentColumnsInfo, 'MaterialA001')
    this.getColumnWidth(this.useTableColumn, 'UsetoolsA001')
  },
  mounted() {
    this.getDataListinfo()
    this.getUserList()
    this.$nextTick(() => {
      this.baoStr = `${this.$t('完成保养')}`
      if (Number(this.datingObj.taskStatus) === 1 || Number(this.datingObj.taskStatus) === 2 || Number(this.datingObj.taskStatus) === 5) {
        this.reloadEdit = true
      }
      if (Number(this.datingObj.taskStatus) === 3) {
        this.beconfirmed = true
        this.baoStr = `${this.$t('完成确认')}`
      }
      if ((Number(this.datingObj.taskStatus) < 5 && Number(this.datingObj.taskStatus) > 3) || Number(this.datingObj.taskStatus) === 0) {
        this.useTableColumn = this.useTableColumn.filter(val => val.key !== 'action')
        this.contentColumnsInfo = this.contentColumnsInfo.filter(val => val.key !== 'action')
        this.showStatus = false
      } else {
        this.showStatus = true
        // this.contentColumns = this.contentColumns.filter(val=>val.title !== '保养SOP')
      }
    })
  },
  methods: {
    getUserList(query){
      this.axios({
        url:'/basic/user/searchUser',
        method:'get',
        params:{
          key:'',
        }
      }).then(res=>{
        this.userList=res.data || []
      })
    },
    changeradio(val) {
      if (val) {
        this.detail.dcmMaintainProject.forEach(val => this.$set(val, 'resultStatus', 1))
      } else {
        this.detail.dcmMaintainProject.forEach(val => this.$set(val, 'resultStatus', null))
      }
    },
    weixiucancle() {
      if (!(this.detail.dcmMaintainProject && this.detail.dcmMaintainProject.length)) {
        return;
      }
      this.sumbitEnter()
      this.sucessStatus = true
    },
    cancleBack() {
      // this.repairShow = false
    },
    weixiuClick() {
      this.tarGetid = this.datingObj.deviceMId
      this.$refs.addModal.show(this.tarGetid)
      this.sumbitEnter(true)
    },
    resultStatusChange(row) {
      this.detail.dcmMaintainProject.forEach(val => {
        if (val.id === row.id) {
          val.resultStatus = row.resultStatus
        }
      })
    },
    resultValueChange(row) {
      this.detail.dcmMaintainProject.forEach(val => {
        if (val.id === row.id) {
          val.resultValue = row.resultValue
        }
      })
    },
    dataURLtoFileFun(dataurl, filename) {
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    async delFujian(item, obj) {
      if (item.id) {
        const params = {
          id: item.id
        }
        const { data } = await delfileUpload(params)
        if (data === '删除成功!') {
          obj.attachments = obj.attachments.filter(val => val.filepath !== item.filepath)
        }
      } else {
        obj.attachments = obj.attachments.filter(val => val.filepath !== item.filepath)
      }
    },
    afterRead(file, name) {
      if (!this.tarGetObj.itemId) {
        return
      }
      if (file.file.type.indexOf('video') !== -1 || file.file.type.indexOf('image') !== -1) {
        let formData = new FormData();
        formData.append("dir", 'device')
        if (file.file.type.indexOf('image') !== -1) {
          formData.append("file", this.dataURLtoFileFun(file.content, "file.jpg"));
        }
        if (file.file.type.indexOf('video') !== -1) {
          formData.append("file", this.dataURLtoFileFun(file.content, "file.video"));
        }
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        }
        fileUpload(formData, config).then(res => {
          if (res.code == 200) {
            if (!res.data.fileLength) {
              return
            }
            const data = [res.data].map(val => ({
              itemId: this.tarGetObj.itemId,
              taskId: this.detail.id,
              fileName: val.fileName,
              filePath: val.filepath,
              fileUrl: val.fileUrl
            }))
            addfileUpload(data)
            res.data.itemId = this.tarGetObj.itemId
            res.data.taskId = this.detail.id
            if (this.tarGetObj.attachments && this.tarGetObj.attachments.length) {
              this.tarGetObj.attachments = this.tarGetObj.attachments.concat([res.data])
            } else {
              this.tarGetObj.attachments.push(res.data)
            }
            // if (this.tarGetObj.attachments && this.tarGetObj.attachments.length){
            //   const data = this.tarGetObj.attachments.map(val=>({
            //     itemId:val.itemId,
            //     taskId: this.detail.id,
            //     fileName:val.fileName,
            //     filePath:val.filepath,
            //     fileUrl:val.fileUrl
            //   }))
            //   addfileUpload(data)
            // }
          }
        })
      } else {
        this.$Message.error('只能上传视频/图片')
      }
    },
    toolvisibleChange(val) {
      if (!val) {
        this.toolStatus = 'add'
      }
    },
    visibleChange(val) {
      if (!val) {
        this.materiaStatus = 'add'
      }
    },
    toolEdit(row) {
      this.tarGetObj.maintainToolList.forEach(val => {
        if (val.toolCode === row.toolCode && val.toolName === row.toolName) {
          row.id = val.id
        }
      })
      this.toolStatus = 'edit'
      this.tableTool = row
      this.toollVisible = true
    },
    materEdit(row) {
      this.tarGetObj.maintainMaterials.forEach(val => {
        if (val.materialCode === row.materialCode && val.materialName === row.materialName) {
          row.id = val.id
        }
      })
      this.materiaStatus = 'edit'
      this.tableMaterial = row
      this.materialVisible = true
    },
    toolChange(val) {
      if (!val) {
        return
      }
      const obj = this.toolNoList.find(item => item.materialName == val)

      if (obj) {
        this.tableTool = {
          isEdit: false,
          id: obj.id,
          toolCode: obj.materialCode,
          toolName: obj.materialName,
          toolMode: '',
          toolNum: 1
          // useOutInfoId:obj.id,
          // manageType:obj.manageType,
          // materialCode:obj.materialCode,
          // materialName:obj.materialName,
          // specification:obj.specification,
          // // unitPrice:obj.purchasePrice,
          // num:1
        }
        // if (obj.manageType == 1){
        //   this.tableMaterial.num =1
        //   this.tableMaterial.numStatus = true
        // }
      }
    },
    materieChange(val) {
      if (!val) {
        return
      }
      const obj = this.materielNoList.find(item => item.materialName == val)
      if (obj) {
        this.tableMaterial = {
          isEdit: false,
          id: obj.id,
          useOutInfoId: obj.id,
          manageType: obj.manageType,
          materialCode: obj.materialCode,
          materialName: obj.materialName,
          specification: obj.specification,
          // unitPrice:obj.purchasePrice,
          num: 1
        }
        if (obj.manageType == 1) {
          this.tableMaterial.num = 1
          this.tableMaterial.numStatus = true
        }
      }
    },
    debounceSerach(fn, delay) {
      let _this = this
      return function f(...args) {
        if (_this.timeID) {
          clearTimeout(_this.timeID);
        }
        _this.timeID = setTimeout(() => {
          fn(args);
        }, delay);
      };
    },
    toolNoChange(val) {
      if (!val) {
        return
      }
      const fn = this.debounceSerach(() => {
        const params = {
          materialName: val,
          pageNum: 1,
          pageSize: 99,
        }
        this.axios({
          method: 'post',
         url: '/dms/material/page',
          data:params,
        }).then(res => {
          if (res.code === 200) {
            if (res.data) {
              this.toolNoList = res.data.records
            }
          } else {
            this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
          }
        })
      }, 360)
      fn()
    },
    materielNoChange(val) {
      if (!val) {
        return
      }
      const fn = this.debounceSerach(() => {
        const params = {
          materialName: val,
          pageNum: 1,
          pageSize: 99,
        }
        this.axios({
          method: 'post',
          url: '/dms/material/page',
          data: { ...params }
        }).then(res => {
          if (res.code === 200) {
            if (res.data) {
              this.materielNoList = res.data.records
            }
          } else {
            this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
          }
        })
      }, 360)
      fn()
    },
    toolClose() {
      this.toollVisible = false
    },
    materiaClose() {
      this.materialVisible = false
    },
    toolDelete(row) {
      this.tarGetObj.maintainToolList.forEach(val => {
        if (val.toolCode === row.toolCode && val.toolName === row.toolName) {
          row.id = val.id
        }
      })
      const obj = {
        id: row.id,
      }
      deleToolNo(obj).then(res => {
        this.$Message.success('删除成功!')
        this.useTablelist = this.useTablelist.filter(val => val.toolCode !== row.toolCode && val.toolName !== row.toolName)
        this.tarGetObj.maintainToolList = this.tarGetObj.maintainToolList.filter(val => val.toolCode !== row.toolCode && val.toolName !== row.toolName)
      })
    },
    materDelete(row) {
      this.tarGetObj.maintainMaterials.forEach(val => {
        if (val.materialCode === row.materialCode && val.materialName === row.materialName) {
          row.id = val.id
        }
      })
      const obj = {
        itemId: this.tarGetObj.itemId,
        taskId: this.detail.id,
        id: row.id,
      }
      deleMaterielNo(obj).then(res => {
        this.$Message.success('删除成功!')
        this.materTablelist = this.materTablelist.filter(val => val.materialCode !== row.materialCode && val.materialName !== row.materialName)
        this.tarGetObj.maintainMaterials = this.tarGetObj.maintainMaterials.filter(val => val.materialCode !== row.materialCode && val.materialName !== row.materialName)
        // this.getDataListinfo()
      })
    },
    toolTableobj() {
      if (!this.tableTool.toolCode) {
        this.$Message.error(({ content: '请填写工具物料号!', duration: 3, closable: true }));
        return;
      }
      if (!this.tableTool.toolName) {
        this.$Message.error(({ content: '请填写工具名称!', duration: 3, closable: true }));
        return;
      }
      if (!this.tableTool.toolMode) {
        this.$Message.error(({ content: '请填写保管方式!', duration: 3, closable: true }));
        return;
      }
      if (!this.tableTool.toolNum) {
        this.$Message.error(({ content: '请填写数量!', duration: 3, closable: true }));
        return;
      }
      if (this.toolStatus !== 'edit') {
        const flag = this.useTablelist.some(val => val.toolCode === this.tableTool.toolCode)
        if (flag) {
          this.$Message.error(({ content: '该工具已添加', duration: 3, closable: true }));
          return
        }
      }
      const data = {
        toolMode: this.tableTool.toolMode,
        toolCode: this.tableTool.toolCode,
        toolName: this.tableTool.toolName,
        toolNum: this.tableTool.toolNum,
        itemId: this.tarGetObj.itemId,
        taskId: this.detail.id
      }
      if (this.toolStatus === 'edit') {
        data.id = this.tableTool.id
      }
      saveTool(data, this.toolStatus).then(res => {
        if (res.code == 200) {
          if (this.toolStatus !== 'edit') {
            this.useTablelist.unshift(this.tableTool)
            this.$Message.success('添加成功!')
          } else {
            this.$Message.success('编辑成功!')
          }
          this.getDataListinfo()
          this.toolClose()
        } else {
          this.$Message.error(res.msg)
        }
      })
    },
    materiaTableobj() {
      if (!this.tableMaterial.materialCode) {
        this.$Message.error(({ content: '请填写工具物料号!', duration: 3, closable: true }));
        return;
      }
      if (!this.tableMaterial.materialName) {
        this.$Message.error(({ content: '请填写品名!', duration: 3, closable: true }));
        return;
      }
      // if (!this.tableMaterial.specification) {
      //   this.$Message.error(({ content: '请填写规格!', duration: 3, closable: true }));
      //   return;
      // }
      if (!this.tableMaterial.num) {
        this.$Message.error(({ content: '请填写数量!', duration: 3, closable: true }));
        return;
      }
      if (this.materiaStatus !== 'edit') {
        const flag = this.materTablelist.some(val => val.materialCode === this.tableMaterial.materialCode)
        if (flag) {
          this.$Message.error(({ content: '该物料已添加', duration: 3, closable: true }));
          return
        }
      }
      const data = {
        materialCode: this.tableMaterial.materialCode,
        materielNo: this.tableMaterial.materialCode,
        materialName: this.tableMaterial.materialName,
        specification: this.tableMaterial.specification,
        num: this.tableMaterial.num
      }
      if (this.materiaStatus !== 'edit') {
        data.itemId = this.tarGetObj.itemId
        data.taskId = this.detail.id
        data.useOutInfoId = this.tableMaterial.id
      } else {
        data.useOutInfoId = this.tableMaterial.useOutInfoId
        data.id = this.tableMaterial.id
      }
      this.axios({
        url:this.materiaStatus!== 'edit'?'/dms/dcmMaintainTask/addMaterial':'/dms/dcmMaintainTask/updateMaterial',
        data,
        method:this.materiaStatus !== 'edit'?'post':'put',
      }).then(res => {
        if (res.code == 200) {
          if (this.materiaStatus !== 'edit') {
            this.materTablelist.unshift(this.tableMaterial)
            this.$Message.success('添加成功!')
          } else {
            this.$Message.success('编辑成功!')
          }
          this.getDataListinfo()
          this.materiaClose()
        } else {
          this.$Message.error(res.msg)
        }
      })
    },
    handleTool() {
      this.tableTool = {
        num: 1
      }
      this.toolNoList = []
      this.toollVisible = true
    },
    handleMaterial() {
      this.tableMaterial = {
        num: 1
      }
      this.materielNoList = []
      this.materialVisible = true
    },
    cancleRetu() {
      // this.$router.replace('/maintenanceList')
      this.$router.go(-1)
      this.$store.commit('detail/SET_DETAILOBJ', [])
      this.$store.commit('detail/SET_SUMBITSTATUS', false)
      this.$store.commit('detail/SET_MAINBY', '')
    },
    endBao() {
      if (!(this.detail.dcmMaintainProject && this.detail.dcmMaintainProject.length)) {
        return;
      }
      const flag = this.detail.dcmMaintainProject.every(val => Number(val.resultStatus) === 1)
      const flagNull = this.detail.dcmMaintainProject.some(val => !val.resultStatus)
      if (!flag && (Number(this.datingObj.taskStatus) === 1 || Number(this.datingObj.taskStatus) === 2)) {
        const arr = this.detail.dcmMaintainProject.map(val => {
          if (Number(val.resultStatus) === 2) {
            return val.itemProject
          }
        })
        if (arr && arr.length && !flagNull) {
          this.projectStr = arr.join(',')
          this.sucessStatus = false
        } else {
          this.$Message.info('请完善保养项目')
        }
        return
      }
      this.sumbitEnter()
    },
    sumbitEnter(flag) {
      let data = {
        taskId: this.detail.id,
      }
      let url = '/dms/mobile/maintainTask/complete'
      if (this.baoStr !== '完成保养') {
        url = '/dms/mobile/maintainTask/confirm'
        data['serviceAttitudeScore'] = this.serviceAttitudeScore
        data['technicalSkillsScore'] = this.technicalSkillsScore
        data['responseSpeedScore'] = this.responseSpeedScore
        // if (!this.serviceAttitudeScore) {
        //   this.$Message.warning('请评分服务态度！');
        //   return
        // }
        // if (!this.technicalSkillsScore) {
        //   this.$Message.warning('请评分技术能力！');
        //   return
        // }
        // if (!this.responseSpeedScore) {
        //   this.$Message.warning('请评分响应速度！');
        //   return
        // }
      } else {
        data = {
          taskId: this.detail.id,
          assistMaintainBy: this.detail.assistMaintainBy,
          results: []
        }
        if (this.detail.dcmMaintainProject && this.detail.dcmMaintainProject.length) {
          data.results = this.detail.dcmMaintainProject.map(val => ({
            taskId: this.detail.id,
            projectId: val.id,
            resultValue: val.resultValue,
            resultStatus: val.resultStatus
          }))
        }
      }
      // return;
      enterMaintenance(data, url).then(res => {
        if (res.code !== 200) {
          this.$Message.warning(res.msg)
        }
        if (!flag) {
          this.$router.push('/maintenanceList')
        }
      })
    },
    closeMance() {
      const data = {
        taskId: this.detail.id,
        caseEndReason: this.detail.caseEndReason
      }
      finishCase(data).then(res => {
        this.$Message.success('结案成功')
        this.$router.push('/maintenanceList')
      })
    },
    async getDataListinfo() {
      const taskId = this.datingObj.id
      const { data } = await getListitems({
        taskId,
      })
      if (data.confirmByStr) {
        this.confirmedBy = data.confirmByStr.split(',').some(val => val === localStorage.getItem("ziyunFactoryPortalName"))
      } else {
        this.confirmedBy = true
      }
      this.responseSpeedScore = data.responseSpeedScore
      this.serviceAttitudeScore = data.serviceAttitudeScore
      this.technicalSkillsScore = data.technicalSkillsScore
      if (data.dcmMaintainProject && data.dcmMaintainProject.length) {
        data.dcmMaintainProject.forEach(item => {
          if (item.attachments && item.attachments.length) {
            item.attachments.forEach(val => val.filepath = val.filePath)
          }
        })
      }
      if (this.detail.id) {
        this.detail = {
          ...data,
          assistMaintainBy: this.detail.assistMaintainBy,
          dcmMaintainProject: data.dcmMaintainProject
        }
        this.tarGetObj = data.dcmMaintainProject.find(val => val.id === this.tarGetObj.id)
      } else {
        this.detail = { ...data }
      }
    },
    baoExport() {
      const params = {
        id: this.detail.taskId
      }
      const filName = '保养内容'
      this.axios({
        method: 'get',
        url: '/dms/dcmMaintainTask/exportItem',
        responseType: 'blob',
        params
      }).then(res => {
        fileDownload(res, filName + '.xlsx')
      })
    },
    previewClicjk(item, index, arr) {
      // this.galleryIndex = index
      // let arr = this.fileTablelist
      // this.galleryImages = arr.map(val=>{
      //   if(val.fileUrl.includes('video')){
      //     val.filetype = 'video/mp4'
      //   }
      //   if(val.fileUrl.includes('jpg')){
      //     val.filetype = 'image/jpeg'
      //   }
      //   return {
      //     type: val.filetype,
      //     href: val.fileUrl,
      //   }
      // })
      if (this.util.fileType(item.fileName) === 'file') {
        this.iframeShow = true
        let env = process.env.NODE_ENV;
        let origin = window.location.origin;
        let path = '/kakone';
        if (env === 'tong') {
          path = '';
        }
        let fileUrl = origin + this.util.filePathToUrl(item.filePath)
        this.iframeModalSrc = origin + path + `/fileServer/onlinePreview?url=${fileUrl}`
      } else {
        if (this.galleryIndex) {
          this.galleryIndex = null
        }
        let list = []
        list = arr.filter(val => this.util.fileType(val.fileName) !== 'file')
        // this.galleryIndex = index
        this.galleryImages = list.map(val => {
          let objPath = val.filepath || val.filePath
          if (this.util.fileType(objPath) === 'video') {
            val.filetype = 'video/mp4'
          }
          if (this.util.fileType(objPath) === 'image') {
            val.filetype = 'image/jpeg'
          }
          return {
            type: val.filetype,
            href: this.util.filePathToUrl(val.filepath || val.filePath),
          }
        })
        this.galleryIndex = this.galleryImages.findIndex(val => val.href === this.util.filePathToUrl(item.filepath || item.filePath))
      }
    },
    // 选择工具物料附件
    checkInfo(row, num) {
      this.tarGetObj = row
      switch (num) {
        case 1:
          this.useTableStatus = true
          this.useTablelist = row.maintainToolList
          break;
        case 3:
          this.fileTableStatus = true
          this.fileTablelist = row.attachments
          break;
        case 2:
          this.materTableStatus = true
          this.materTablelist = row.maintainMaterials
          break;
      }
    },
    useClick(row, num) {
      const obj = {
        method: '',
        url: '',
        params: {},
        data: {},
      }
      switch (num) {
        case 1:
          obj.url = '/dms/dcmMaintainTask/queryToolByItemId'
          obj.method = 'get'
          obj.params = { itemId: row.itemId }
          break;
        case 2:
          obj.url = '/dms/dcmMaintainTask/queryFileById'
          obj.method = 'post'
          obj.data = { itemId: row.itemId, taskId: this.detail.taskId }
          break;
        case 3:
          obj.url = '/dms/dcmMaintainTask/queryMaterialById'
          obj.method = 'post'
          obj.data = { itemIds: [row.itemId], taskId: this.detail.taskId }
          break;
      }
      this.axios(obj).then(res => {
        const arr = res.data
        if (res.code === 200) {
          switch (num) {
            case 1:
              this.useTableStatus = true
              this.useTablelist = arr
              break;
            case 2:
              this.fileTableStatus = true
              this.fileTablelist = arr
              break;
            case 3:
              this.materTableStatus = true
              this.materTablelist = arr
              break;
          }
        } else {
          this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
        }
      })
    },
    back() {
      this.$emit('changeDetailVisible', false)
    },
    seeDetail(row) {
      this.visible = true;
      this.getWlDetail(row)
    },
    getWlDetail(row) {
      this.axios({
        method: 'get',
        url: '/dms/dcmMaintainTask/queryByItemId',
        params: {
          itemId: row.itemId,
          taskId: this.detail.taskId
        }
      }).then(res => {
        if (res.code === 200) {
          this.materialList = res.data.materialList
          this.toolList = res.data.toolList
        } else {
          this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
        }
      })
    },
  }
}
</script>
<style scoped lang="scss">
/deep/ .ivu-input-number {
  width: 100% !important;
}
</style>
<style lang="scss">
.materBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .operationBtn {
    cursor: pointer;
    margin: 0 10px;
    white-space: nowrap;
  }

  .operationBtn:hover {
    transition: all .3s linear;
    color: #035beb;
  }

  .icon {
    border: 1px solid #187bdb;
    border-radius: 30px;
    padding: 5px 20px 5px 20px;
    display: flex;
    align-items: center;
    //margin-left/*:*/ 20px;
    color: #187bdb;
    margin: 0 16px 16px 16px;
    cursor: pointer;

    i {
      font-size: 20px;
      font-weight: bold;
    }
  }
}

.box_footer {
  width: 100%;
  height: 56px;
  background: #FFFFFF;
  //position: fixed;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  //bottom: 0;
  //left: 0;
  .btn {
    margin: 8px 12px;
    width: 112px;
    height: 40px;
    background: rgba(3, 91, 235, 0.5000);
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
  }
}

::v-deep .blueimp-gallery>.close {
  display: block !important;
}

.imgBoxlist {
  width: 100%;
  height: 50vh;

  .videoList {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    .ivu-row {
      width: 100%;
    }

    .itemCol {
      width: 100%;
      height: 100px;
      padding: 0 5px;

      .van-badge__wrapper {
        width: 100%;
        height: 100%;

        /deep/ .van-uploader__preview {
          display: none !important;
        }
      }

      .van-uploader {
        width: 100%;

        .van-uploader__wrapper {
          .van-uploader__upload {
            width: 100%;
            height: 100px;
            margin: 0 !important;
          }
        }
      }
    }
  }

  .box_wrapper {
    padding: 0 5px;
  }

  .itemCol {
    width: 100%;
    height: 200px;

    .item {
      display: block;
      width: 100%;
      height: 100%;

      .fileSty {
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgb(255, 237, 137);
        width: 100%;
        height: 100%;
      }

      img {
        width: 100%;
        height: 100%;
      }

      video {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }
  }
}

.checkMaintainDetail {

  //background: #fff;
  .erroBox {
    background-color: #ffffff;
    height: calc(100vh - 200px);
    position: relative;

    .erroBox_list {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 200px;
      left: 35%;
    }

    .btn {
      width: 112px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: #035BEB;
      border-radius: 25px;
      border: 1px solid #035BEB;
      margin-top: 20px;
    }

    .textOne {
      font-size: 14px;
      display: inline-block;
      margin-bottom: 5px;
      font-weight: bold;
      color: #00142D;
    }

    .textTwo {
      font-size: 14px;
      font-weight: 400;
      color: #00142D;
    }

    .text {
      display: inline-block;
      margin-bottom: 20px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 20, 45, 0.5000);
    }

    .imgBox {
      width: 189px;
      height: 142px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .title {
    display: flex;
    justify-content: flex-start;
    font-size: 20px;
    padding: 10px;
    border-bottom: 1px solid #dddddd;
    align-items: center;

    .back {
      color: #187BDB;
      font-size: 16px;
      padding-left: 20px;
      cursor: pointer;
    }
  }

  .titleItem {
    position: relative;
    font-size: 18px;
    font-weight: bold;
    padding: 0;

    .scoreBox {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      .item_score {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .ivu-rate-star {
          font-size: 20px;
        }

        .text {
          display: inline-block;
          padding-right: 15px;
        }
      }
    }

    .titleItem_box {
      .text {
        font-size: 18px;
        font-weight: bold;
      }

      .btn_box {
        cursor: pointer;
        padding: 0 15px;
        font-size: 15px;
        font-weight: bold;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        i {
          display: inline-block;
          cursor: pointer;
          font-size: 30px;

        }
      }

      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .checkObject {
      display: flex;
      flex-wrap: wrap;
      padding: 0 !important;
      /*border-bottom: 2px solid #D7D7D7;*/
      font-family: 'Arial Normal', 'Arial', sans-serif;
      font-weight: 400;
      font-style: normal;
      letter-spacing: normal;

      .checkObjectItem {
        display: flex;
        flex: 33.33%;

        .checkObjectName {
          height: 40px;
          line-height: 40px;
          width: 100%;
          border: 1px solid #EEEEEE;
          background: #F5F6F7;
          text-align: left;
          padding-left: 10px;
          color: #666666;
        }

        .checkObjectValue {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          height: 40px;
          line-height: 40px;
          width: 100%;
          border: 1px solid #EEEEEE;
          padding-left: 10px;
          color: #333;

          .ivu-tooltip {
            height: 40px;
            line-height: 40px;
          }
        }
      }
    }

    .checkTool {
      display: flex;
      padding: 20px;

      .checkToolItem {
        flex: 1;

        .checkObjectName {
          height: 40px;
          line-height: 40px;
          border: 1px solid #eeeeee;
          background: #f5f6f7;
          text-align: center;
        }

        .checkObjectValue {
          height: 40px;
          line-height: 40px;
          border: 1px solid #eeeeee;
          text-align: center;
        }
      }
    }

    .searchBox {
      .label {
        display: flex;
      }
    }

  }

  .contentTable {
    margin: 0;

    .operationBtn {
      padding: 0 4px;
      color: #187BDB;
      cursor: pointer;
    }
  }

  .titleItem::before {
    content: '' !important;
    width: 0;
    height: 0;
  }
}

.over-wrapper {
  width: 200px;
  /*height: 23px;*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</style>
